<template lang="pug">
  .counter-warp
    p Vuex counter：{{ count }}
    p
      button(@click="increment") +
      button(@click="decrement") -
    a.home(@click="goToIndex") 去往首页
</template>

<script>
  import {mapMutations} from 'vuex'

  export default {
    computed: {
      count () {
        return this.$store.state.counter.count
      }
    },
    created () {
    },
    methods: {
      ...mapMutations([
        'increment',
        'decrement'
      ]),
      goToIndex () {
        this.$router.back()
      }
    }
  }
</script>

<style>
  .counter-warp {
    text-align: center;
    margin-top: 100px;
  }

  .home {
    display: inline-block;
    margin: 100px auto;
    padding: 5px 10px;
    color: blue;
    border: 1px solid blue;
  }
</style>
